<template>
  <view class="content">
    <view class="tabs">
      <view
        class="item"
        @click="changeTab(item)"
        :class="{ check: checkTab === item.value }"
        v-for="item in tabs"
        :key="item.value"
      >
        {{ item.lable }}
      </view>
    </view>
    <scroll-view scroll-y="true" class="scroll">
      <view class="main">
        <view class="card box" v-for="item in list" :key="item.id" @click="goDetail(item)">
          <view class="card-t">
            <view class="card-t-t">
              <view class="card-t-t-l">
                <image class="store" src="/static/order-md.png" />
                <view class="name">{{item.shopName}}</view>
                <image class="jt" src="/static/jt.png" />
              </view>
              <view class="card-t-t-r">{{ orderStatus[item.status] }}</view>
            </view>
            <view class="card-t-c">
              <image src="/static/order-tq.png" />
              <view>{{item.billiardMainName}}</view>
            </view>
            <view class="card-t-b">
              <image src="/static/order-time.png" />
              <view>{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')  }}</view>
            </view>
          </view>
          <view class="btns">
            <view class="btn" v-if="item.orderSource == 2 && item.status == 60 && isTime(item)" @click.stop="onSubmit(item)">开台</view>
            <view class="btn gray" v-if="item.orderSource == 2 && item.status == 50" >待开台</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { orderPage,preOrderWithOnline } from "@/service/index";
import { onLoad,onShow } from '@dcloudio/uni-app';
import dayjs from "dayjs";
const checkTab = ref('');
const list = ref([])
const orderStatus = reactive({
  0: "待支付",
  10: "待发货",
  20: "已支付",
  30: "已完成",
  40:"已取消",
  50:"待使用",
  60:"待开台"
});
const tabs = [
  {
    lable: "全部订单",
    value: '',
  },
  {
    lable: "待支付",
    value: 0,
  },
  {
    lable: "已支付",
    value: 20,
  },
  {
    lable: "已完成",
    value: 30,
  },
];
const changeTab = (item) => {
  checkTab.value = item.value;
  getList();
};
// 是否在开台时间
const isTime = (item)=>{
  // 预约开台时间大于当前时间
    if(item.billStartTime > dayjs().valueOf()){
      return false;
    }
    return true;
}
const getList = () => {
  orderPage({
    pageNo: 1,
    pageSize: 1000,
    status: checkTab.value,
  }).then(res=>{
    list.value = res.list;
  })
};
const goDetail = (item)=>{
  uni.navigateTo({
    url: `/pages/order/detail?id=${item.id}`,
  })
}
const onSubmit= (item)=>{
  uni.showModal({
    content: '确认开台吗？',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if(confirm){
          preOrderWithOnline({no:item.no}).then(res=>{
          uni.showToast({
            title: '开台成功',
            icon: 'none',
          })
          getList();
        })
      }
    }
  })
}
onShow(()=>{
  getList();
})
</script>
<style lang='less' scoped>
.content {
  overflow: hidden;
  height: 100vh;
  .tabs {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88rpx;
    .item {
      position: relative;
      font-size: 28rpx;
      color: #333333;
      &.check {
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 4rpx;
          background-color: #009a44;
          bottom: -4rpx;
          left: 0;
        }
      }
    }
  }
  .scroll{
    height: calc(100vh - 88rpx);
  }
  .main {
    padding: 24rpx;
  }
  .card {
    padding: 28rpx 0 20rpx;
    margin-bottom: 24rpx;
    .card-t {
      border-bottom: 2rpx solid #eeeeee;
      margin-bottom: 22rpx;
      .card-t-t {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;
        padding: 0 26rpx;
        .card-t-t-l {
          display: flex;
          align-items: center;
          margin-right: 10rpx;
          .store {
            width: 32rpx;
            height: 32rpx;
            margin-right: 18rpx;
          }
          .name {
            font-size: 28rpx;
            font-weight: 600;
            color: #333333;
            margin-right: 10rpx;
            flex: 1;
          }
          .jt {
            width: 18rpx;
            height: 32rpx;
          }
        }
        .card-t-t-r {
          font-size: 28rpx;
          color: #ff5d15;
          flex-wrap: nowrap;
          white-space: nowrap;
        }
      }
      .card-t-c {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        padding: 0 26rpx;
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
      }
      .card-t-b {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        padding: 0 26rpx;
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
      }
    }
    .btns{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .btn{
        background: #009a44;
        border-radius: 38rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        padding: 14rpx 32rpx;
        &.gray{
          background-color: #ccc;
          margin-left: 10rpx;
        }
      }
    }
    .card-b {
      padding: 0 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .card-b-l {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #009a44;
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .card-b-r {
        background: #009a44;
        border-radius: 38rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        padding: 14rpx 32rpx;
      }
    }
  }
}
</style>